<template>

  <fragment>
  <el-form :model="formData" :inline="true"  class="demo-form-inline" style="margin:10px 0;">
  <el-form-item label="会员姓名">
    <el-input  placeholder="请输入姓名" v-model="formData.username" ></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" icon="el-icon-search" @click="searchinfo">搜索</el-button>
  </el-form-item>
</el-form>
<!--表格  -->
    <el-table
      :data="memberList"
      style="width: 100%;">
      <el-table-column
        prop="username"
        label="会员姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="accumulative_integral"
        label="累计积分"
        width="180">
      </el-table-column>
      <el-table-column
        prop="avaliable_integral"
        label="可用积分">
      </el-table-column>

        <el-table-column
        
        label="操作">

        <template slot-scope="scope">
        <el-button
         size="mini"
          >查看流水</el-button>
        <el-button
          size="mini"
        
         >兑换登记</el-button>
      </template>
      </el-table-column>

    </el-table>
    <!-- 分页器 -->
        <el-pagination 
    background 
    layout="prev, pager, next" 
    :total="total" 
    :page-size="5"
    style="text-align:center;"
    @current-change="changepag"
    >
    </el-pagination>

  </fragment>

</template>

<script>
import {getInfo,findInfo} from "@/api"
import ajax from "@/api/ajax.js"
export default {
  name: 'accountPoint',
  data(){
    return{
      memberList:[],
      formData:{
        username:''
      },
      total:0
    }
  },
  methods:{
    // 获取整体信息
    async getInfoAll(index=1){
      let result = await getInfo()
      // console.log(result)
      if(result.code===200){
        this.memberList = result.data.slice((index-1)*5,index*5)
        this.total=result.data.length
      }
    },
    // 分页器的回调
       changepag(index){
         if(this.formData.username){
           searchinfo(index)
         }else{
        this.getInfoAll(index)

         }
    },
    // 查找
    async searchinfo(index=1){
      // ajax.post("http://localhost:4100/findaccount",{
      //   username:this.formData.username
      // }).then(res=>{
      //   this.memberList=res.data.data
      //     this.total = this.memberList.length
      // })
      let result =await findInfo({username:this.formData.username});
        console.log(result)

      if(result.code ===200){
        this.memberList = result.data
        this.total=result.data.length
      }


    }
  },
  mounted(){
    // 获取后台信息
    this.getInfoAll()
    // ajax
    //   .get("http://localhost:4100/accountAll")
    //   .then((res) => {
    //     // console.log("请求成功!");
    //     this.memberList = res.data.data;
    //     // console.log(res.data.data);
    //   })
    //   .catch((err) => {
    //     console.log(err);
    //   });
  }
}
</script>

<style lang="less" scoped>

</style>
